import React, { PropTypes } from 'react';

import Menu from '../components/menu.jsx';

const propTypes = {
  id: PropTypes.number,
  text: PropTypes.string,
  menuStyle: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
  showTxt: '',
  messageCount:0,
};

class Header extends React.Component {
  constructor(props) {
    super(props);
    // return false;
    this.state = {
      'menuDisplay':'none',
      'className':'',
    };
  }
  static methodsAreOk() {
    return true;
  }
  componentWillMount() {
    console.log('componentWillMount');
    return false;
  }
  componentDidMount() {
    console.log('componentDidMount');
    return false;
  }
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps---header');
    return false;
  }
  shouldComponentUpdate() {
    return true;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    return false;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // return false;
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // return false;
  }
  clickHandlers() {
    console.log('clicked');
    // return false;
    this.setState({
      className:'show',
      menuDisplay:'block',
    });
  }
  hiddenMenu(arg1,arg2) {
    this.setState({
      className:'',
      menuDisplay:'none',
    })
  }
  render() {
    return (
        <div>
          <div className={"page-cover"} style={{display:this.state.menuDisplay}} onClick={this.hiddenMenu.bind(this)}></div>
          <header className={"fix-header "+this.state.className} id="hd">
              <div className="nv-toolbar">
                  <div className="toolbar-nav" onClick={this.clickHandlers.bind(this)}>
                  </div>
                  <span v-text="pageType">{this.state.className}</span>
                  <i className="num" > {this.props.messageCount || 0}</i>
                  <i className="iconfont add-icon" >&#xe60f;</i>
              </div>
          </header>
          <Menu show={this.state.className} history={this.props.history}></Menu>
        </div>
    );
  }
}

Header.propTypes = propTypes;
Header.defaultProps = defaultProps;

export default Header;